<template>
  <div id="mn">
    <form @submit.prevent="submit">
      <div class="mainbody">
        <div class="red-c">
          <p>
            <span :class="{'alert_text_show':alert_input==1}" class="alert_text">只允许输入数字或半角逗号</span>
          </p>
        </div>
        <div class="leftbody">
          <label>金额列表</label><br/>
          <textarea id="datas" class="in_c" type="text" name="datas" v-model="datas" rows="10" cols="20"/>
        </div>
        <div class="rightbody">
          <div class="input_line  left_align">
            <label for="amount">期望数</label>
            <input id="amount" class="in_c" type="input" name="amount" v-model="amount"/>
            <input id="cb" type="submit" v-model="botton_view"/>
          </div>
          <div class="result_main">
            <ul>
              <li class="flip-container">
                <div :class="{'result_pic':submitting==1}" class="left_align flipper">
                  <div :class="{'front-over':haveResult==1}" class="front">
                    <img src="../assets/fengche.gif">
                  </div>
                  <div :class="{'back-over':haveResult==1}" class="back">
                    <br/><br/><br/>
                    <p class="left_align">经计算以下组合与期望值最接近：</p><br/>
                    <p class="left_align">{{result}}</p><br/>
                    <p class="left_align">相加得：<span class="red-c">{{r_sum}}</span>，与期望数相差：<span class="red-c">{{r_min}}</span></p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      datas: '100,200,300,400,500',
      amount: '900',
      botton_view: '凑数',
      result: '',
      r_min: '',
      r_sum: '',
      submitting: 0,
      haveResult: 0,
      alert_input: 0
    }
  },
  methods: {
    submit: function () {
      // console.log(this.inputtext)
      this.datas = this.datas.replace(/^,/, '')
      this.datas = this.datas.replace(/,$/, '')
      if (this.submitting === 1) {
        return false
      }
      if (this.amount === '' || this.datas === '') {
        alert('需要提供具体数值！')
        return false
      }
      this.submitting = 1
      this.botton_view = '计算中'
      this.haveResult = 0
      this.$axios.post(process.env.BASE_URL + 'mn/mn', {datas: this.datas, amount: this.amount}, { credentials: true }).then((res) => {
        this.submitting = 0
        this.botton_view = '凑数'
        if (res.data.status === 0) {
          console.log('SUCCESS')
          this.result = res.data.data.result
          this.r_sum = res.data.data.r_sum
          this.r_min = res.data.data.r_min
          this.haveResult = 1
        } else {
          alert(res.data.msg)
          console.log(res.data.msg)
        }
      }, function (response) {
        this.submitting = 0
        this.botton_view = '凑数'
        alert('对不起，服务器出错了!_!')
        console.log('error')
      })
    },
    alert_show () {
      this.alert_input = 1
      // 箭头函数解决this不生效问题
      setTimeout(() => {
        this.alert_input = 0
      }, 3000)
    }
  },
  watch: {
    // 输入规则
    amount: function (newValue, oldValue) {
      this.amount = newValue.replace(/[^0-9]/g, '')
    },
    datas: function (newValue, oldValue) {
      let data = newValue.replace(/[^0-9,]/g, '')
      data = data.replace(/,,/g, ',')
      if (this.datas !== data) {
        this.alert_show()
        this.datas = data
      }
      // console.log('alert_input:' + this.alert_input)
    }
  }

}

</script>

<style scoped>
  #mn {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    margin-top: 30px;
  }
  .mainbody{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  .leftbody{
    display: inline;
    float: left;
    width: 40%;
  }
  .in_c {
    /*width: 280px;*/
    background: #FFF;
    border: 1px solid #333;
    /*height: 40px;*/
    /*line-height: 40px;*/
    padding: 0 10px;
    text-align: left;
    font-size: 20px;
  }
  #amount {
    width: 158px;
  }
  .back p {
    margin-top: 5px;
    margin-bottom:5px;
  }
  #cb {
    background: cadetblue;
    border: 1px solid #333;
    line-height: 26px;
    width: 76px;
    height: 26px;
    font-size: 14px;
  }
  label{
    line-height: 40px;
    height: 40px;
    font-size: 18px;
  }
  p{
    height: 19px;
    font-size: 18px;
  }
  .rightbody{
    display: inline;
    float: left;
    width: 60%;
  }
  .left_align{
    float: left;
  }
  .red-c{
    color:red;
  }
  .result_pic img { -webkit-animation: z 5s linear 0s infinite;
    -moz-animation: z 5s linear 0s infinite;
    -ms-animation: z 5s linear 0s infinite;
    animation: z 5s linear 0s infinite;
  }
  @keyframes  z {
    from { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
  }
  @-moz-keyframes z {
    from { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
  }
  @-webkit-keyframes z {
    from { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
  }
  @-o-keyframes z {
    from { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
      transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
  }
  .result_main ul,li{ list-style:none; margin:0; padding:0;}
  .brandsShow ul{ margin-left:-20px; width:1225px; height:auto; }
  .brandsShow ul li{ float:left; display:inline; width:283px; height:283px; }
  .flip-container {perspective: 1000px;
    -webkit-perspective: 1000px; /*父类容器中 perspective 子类允许透视*/
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    margin:0px auto; float:left; margin-left:20px; margin-bottom:20px; border:0px solid #fff;}
  /*.flip-container:hover .back {*/
  .flip-container .back-over {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    z-index:2;
  }
  /*.flip-container:hover .front {*/
  .flip-container .front-over {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    z-index:1
  }
  .flip-container, .front, .back {width: 283px;height: 283px;}
  .flipper {
    transition:transform 0.6s ease-out;
    transition:transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display:block;
    position: relative;
  }
  .front, .back {
    backface-visibility: hidden;
    transition: 0.6s ease-out;
    -webkit-transition: .6s ease-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
  }
  .front img, .back img{ width:283px; height:283px; overflow:hidden;}
  .front {
    z-index: 2;
    transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
  .back {
    z-index:1;
    transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
  }
  p .alert_text_show {
    opacity:1;
    filter: alpha(opacity=1);
  }
  .alert_text {
    opacity:0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 3s ease-out;
    -moz-transition: opacity 3s ease-out;
    -o-transition: opacity 3s ease-out;
    transition: opacity 3s ease-out;
  }
</style>
